<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<link rel="stylesheet" type="text/css" href="../c/suxiangw.css" />
	<style>
		body {
			background-color: transparent;
			/*background-color:#f00;*/
			background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
			background-image: -o-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
			background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
		}

		#sx-header {
			/*background: #f00 !important;*/
			display: flex;
			justify-content: space-between;
			padding: 0 0.45rem;
		}

		.aui-btn img {
			width: 1rem;
		}

		.aui-title span {
			margin: 0 0.35rem;
			font-size: 0.8rem;
			opacity: 0.7;
		}

		.aui-title span.a {
			font-weight: bold;
			opacity: 1;
			-webkit-transition: all .3s;
			transition: all .3s;
			font-size: 0.85rem;
		}

		.aui-bar-nav .aui-title {
			left: 0rem;
			right: 0rem;
			position: relative;
		}

		.aui-pull-right img {
			/*width: 1rem;*/
			/*height: 1.3rem;*/
		}

		.live-container {
			border: 1px solid red;
			width: 100vw;
		}

		.live-item {
			display: flex;
			/* flex-direction: row; */
			/* justify-content: space-between; */
			/* align-items: flex-start; */
			/* flex-wrap:wrap; */
			/* justify-content:space-around; */
			justify-content: flex-end;
		}

		.live-item-avatar img {
			border-radius: 50%;
			width: 50px;
			height: 50px;
		}
	</style>
</head>

<body>

	<header class="aui-bar aui-bar-nav" id="sx-header">
		<!-- <a class="aui-pull-left aui-btn" tapmode onclick="sou()"><img src="../i/sou.png" /></a> -->
		<!-- <div class="aui-title t">
			<span tapmode onclick="a(0)">关注</span>
			<span tapmode onclick="a(1)" class="a">推荐</span>
			<span tapmode onclick="a(2)">热点</span>
			<span tapmode onclick="a(3)">直播</span>
		</div> -->
		<!-- <a class="aui-pull-right aui-btn" tapmode onclick="_url({url:'xiaoxi',title:'消息通知'},'',true)"><img src="../i/tongzhi.png" /></a> -->
		<div class="live-container" onclick="a(3)">
			<div class="live-item">
				<div class="live-item-avatar">
					<img src="../i/test/test-avatar-1.jpeg">
				</div>
				<div class="live-item-avatar">
					<img src="../i/test/test-avatar-2.jpeg">
				</div>
				<div class="live-item-avatar">
					<img src="../i/test/test-avatar-3.jpeg">
				</div>
				<!-- <div class="live-item-avatar">
					头像3
				</div>
				<div class="live-item-avatar">
					头像4
				</div>
				<div class="live-item-avatar">
					头像5
				</div> -->
			</div>
		</div>
	</header>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var header_h = 0
	apiready = function () {
		api.parseTapmode();
		header_h = $api.byId('sx-header');
		_gengxin();
		$api.fixStatusBar(header_h)
		header_h = $api.offset(header_h).h;
		// console.log($('body').html());
		api.setFrameAttr({
			name: 'index_header',
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: header_h,
			}
		});
		// article_loading();

	}

	function a(i) {
		api.setFrameGroupIndex({
			name: 'index',
			index: i,
			scroll: true,
		});
		cla(i)
	}

	function cla(i) {
		$('.t .a').removeClass('a');
		$('.t span').eq(i).addClass('a');
	}

	function htmls() {
		api.execScript({
			frameName: 'index_list_1',
			script: 'htmls()'
		});
	}
	// 搜索
	function sou() {
		var UISearchBar = api.require('UISearchBar');
		UISearchBar.open({
			placeholder: '请输入搜索关键字',
			historyCount: 10,
			showRecordBtn: false,
			texts: {
				cancelText: '取消',
				clearText: '清除搜索记录'
			},
			styles: {
				navBar: {
					bgColor: '#161823',
					borderColor: '#161823'
				},
				searchBox: {
					color: '#000',
					height: 44,
				},
				cancel: {
					bg: 'rgba(0,0,0,0)',
					color: '#f00',
					size: 16
				},
				list: {
					color: '#fff',
					bgColor: '#161823',
					borderColor: '#161823',
					activeBgColor: '#161823',
					size: 16
				},
				clear: {
					color: '#90929E',
					borderColor: '#161823',
					size: 16
				}
			}
		}, function (ret, err) {
			if (ret) {
				console.log(JSON.stringify(ret));
				if (ret.text) {
					_url({
						url: 'search',
						title: '搜索' + ret.text,
						text: ret.text
					})
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
	// 显示发布进度
	function video_loading(data) {
		data = eval('(' + data + ')');
		var url = 'index_video_loading';
		// alert(header_h)
		api.openFrame({
			name: url,
			url: _h_w + url + '.html',
			rect: {
				x: 20,
				y: header_h + 10,
				w: 80,
				h: 110,
			},
			pageParam: data,
			bgColor: 'rgba(0,0,0,0)',
		})
	}

	function zhibo() {
		if (_getPrefs('_config').config.app == 1) {

		} else {
			_url({
				url: 'zhibo_index',
				title: '直播'
			}, '', true)
		}
	}
	function header(a) {
		console.log(a)
		api.execScript({
			frameName: a,
			script: 'header(' + (header_h - 15) + ');'
		});

	}
	// 社交进度
	function article_loading(data) {
		data = eval('(' + data + ')');
		var url = 'article_loading';
		// alert(header_h)
		api.openFrame({
			name: url,
			url: _h_w + url + '.html',
			rect: {
				x: 0,
				y: header_h + 10,
				w: 0,
				h: 0,
			},
			pageParam: data,
			bgColor: 'rgba(0,0,0,0)',
		})
	}
</script>

</html>